import React from 'react';
import router from 'umi/router';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Steps, Radio, Button } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { urlParse } from '@/utils/utils';

const { Step } = Steps;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;

class SelectSteps extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectSplitType: 1,
      billYm: null,
    };
  }

  componentDidMount() {
    const { location } = this.props;
    const { billYm } = urlParse(decodeURI(location.search));
    this.setState({
      billYm,
    });
  }

  // 选择拆分类型
  changesplitType = e => {
    this.setState({
      selectSplitType: e.target.value,
    });
  };

  render() {
    const { selectSplitType, billYm } = this.state;
    return (
      <PageHeaderWrapper>
        <Card>
          <Steps current={0}>
            <Step title="选择拆分类型" />
            <Step title="填写拆分信息" />
            <Step title="完成" />
          </Steps>
          <Form hideRequiredMark style={{ marginTop: '50px' }}>
            <FormItem style={{ textAlign: 'center' }}>
              <RadioGroup onChange={this.changesplitType} value={selectSplitType}>
                <Radio value={1}>按员工拆分</Radio>
                {/* <Radio value={2}>按产品拆分</Radio> */}
              </RadioGroup>
            </FormItem>
          </Form>
          <div style={{ marginTop: 100, marginBottom: 30, textAlign: 'center' }}>
            <Button size="large" style={{ marginRight: 30 }} onClick={() => window.history.back()}>
              返回
            </Button>
            <Button
              type="primary"
              size="large"
              onClick={() =>
                selectSplitType === 1
                  ? router.push(
                      `/chargemanage/customerbilling/splitbymployee?splitType=${selectSplitType}&billId=${billYm}`
                    )
                  : router.push(
                      `/chargemanage/customerbilling/splitbyproduct?splitType=${selectSplitType}&billId=${billYm}`
                    )
              }
            >
              下一步
            </Button>
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }
}
export default SelectSteps;
